<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="发放优惠券"></uni-nav-bar>
		<view class="background"></view>
		<view class="content">
			<!-- 优惠券名称 -->
			<view class="form-item">
				<view style="margin-top: 10rpx;" class="">
					优惠券名称
				</view>
				<input class="input" style="width: 300rpx;" placeholder-style="font-size:20rpx" placeholder="请输入优惠券名称"
					v-model="couponName" />
			</view>

			<view class="coupon-type-container">
				<span class="label">优惠券类型:</span>
				<view class="type-options">
					<view class="type-option" :class="{ 'active': couponType === 'full_reduction' }"
						@click="couponType = 'full_reduction'">
						<text>满减券</text>
						<radio :value="couponType === 'full_reduction'" :checked="couponType === 'full_reduction'" />
					</view>
					<view class="type-option" :class="{ 'active': couponType === 'discount' }"
						@click="couponType = 'discount'">
						<text>打折券</text>
						<radio :value="couponType === 'discount'" :checked="couponType === 'discount'" />
					</view>
				</view>
			</view>
			<view v-if="couponType === 'full_reduction'" class="full-reduction-input">
				<view class="input-unit">
					<text>满</text>
					<input type="number" v-model="fullAmount" placeholder="______" />
					<text>元</text>
				</view>
				<view class="input-unit">
					<text>减</text>
					<input type="number" v-model="reductionAmount" placeholder="______" />
					<text>元</text>
				</view>
			</view>
			<view v-if="couponType === 'discount'" class="full-reduction-input">
				<view class="input-unit">
					<text>打</text>
					<input type="number" v-model="discounts" placeholder="______" />
					<text>折</text>
				</view>
			</view>

			<!-- 时间选择 -->
			<view>
				<picker mode="date" @change="onStartTimeChange" :value="startTime">
					<view class="dataTime">
						<view>发放开始时间：</view>
						<input class="timeFrame" placeholder-style="font-size:20rpx;text-align: center;"
							placeholder="选择开始时间" :value="startTime" readonly
							style="font-size: 24rpx; text-align: center; display: flex; align-items: center; justify-content: center;" />
					</view>
				</picker>
			</view>
			<view>
				<picker mode="date" @change="onEndTimeChange" :value="endTime">
					<view class="dataTime">
						<view>发放结束时间：</view>
						<input class="timeFrame" placeholder-style="font-size:20rpx;text-align: center;"
							placeholder="选择结束时间" :value="endTime" readonly
							style="font-size: 24rpx; text-align: center; display: flex; align-items: center; justify-content: center;" />
					</view>
				</picker>
			</view>

			<!-- 投放数量 -->
			<view class="numberOfPlacements">
				<view style="margin-right: 60rpx;">投放数量</view>
				<input class="input" placeholder-style="font-size:20rpx" placeholder="请输入投放数量"
					v-model="placementQuantity" />
				<text>张</text>
			</view>
			<!-- 每人限领 -->
			<view class="numberOfPlacements">
				<view style="margin-right: 60rpx;">每人限领</view>
				<input class="input" placeholder-style="font-size:20rpx" placeholder="请输入限领数量"
					v-model="limitPerPerson" />
				<text>张</text>
			</view>

			<!-- 有效期 -->
			<view class="dataTime" style="display: flex; align-items: center;">
				<view style="margin-right: 20rpx;">使用有效期：</view>
				<picker mode="date" @change="onValidStartChange" :value="validStart">
					<view :class="{ 'timeFrame placeholder-text': true, 'selected-date': validStart }"
						style="width: 180rpx; font-size: 24rpx; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 20rpx;">
						{{ validStart || '开始时间' }}
					</view>
				</picker>
				<picker mode="date" @change="onValidEndChange" :value="validEnd">
					<view :class="{ 'timeFrame placeholder-text': true, 'selected-date': validEnd }"
						style="width: 180rpx; font-size: 24rpx; text-align: center; display: flex; align-items: center; justify-content: center;">
						{{ validEnd || '结束时间' }}
					</view>
				</picker>
			</view>

			<!-- 确认按钮 -->
			<button class="submit-btn" @click="handleSubmit">确认投放</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime: '',
				couponName: '',
				endTime: '',
				validStart: '',
				validEnd: '',
				showStartPicker: false,
				couponType: 'full_reduction', // 默认选中满减券
				fullAmount: '',
				discounts: '',
				reductionAmount: '',
				placementQuantity: '',
				limitPerPerson: ''
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleSubmit() {
				// 收集表单数据
				const formData = {
					couponName: this.couponName,
					couponType: this.couponType,
					fullAmount: this.fullAmount,
					reductionAmount: this.reductionAmount,
					discounts: this.discounts,
					startTime: this.startTime,
					endTime: this.endTime,
					placementQuantity: this.placementQuantity,
					limitPerPerson: this.limitPerPerson,
					validStart: this.validStart,
					validEnd: this.validEnd
				};
				console.log(formData);
				// 发送请求到后端
				uni.request({
					url: 'https://your-backend-api-url', // 替换为实际的后端 API 地址
					method: 'POST',
					data: formData,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},
			onStartTimeChange(e) {
				this.startTime = e.detail.value;
				console.log('选择的发放开始时间是：', this.startTime);
			},
			onEndTimeChange(e) {
				this.endTime = e.detail.value;
				console.log('选择的发放结束时间是：', this.endTime);
			},
			onValidStartChange(e) {
				this.validStart = e.detail.value;
				console.log('选择的使用有效期开始时间是：', this.validStart);
			},
			onValidEndChange(e) {
				this.validEnd = e.detail.value;
				console.log('选择的使用有效期结束时间是：', this.validEnd);
			}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 300rpx;
	}

	.content {
		top: -280rpx;
		padding: 20rpx;
		position: relative;
		width: 640rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
	}

	.input {
		margin-left: 20rpx;
		height: 60rpx;
		padding: 0 20rpx;
		border: 1rpx solid #E0E0E0;
		border-radius: 60rpx;
	}

	/* 优惠券类型开始 */
	.coupon-type-container {
		display: flex;
		padding: 0 20rpx;
		align-items: center;

		/* 添加垂直居中对齐 */
	}

	.label {
		margin-bottom: 0;
		width: 200rpx;
		/* 移除底部间距 */
	}

	.type-options {
		display: flex;
	}

	.type-option {
		display: flex;
		align-items: center;
		margin-right: 20px;
		padding: 5px 0;
		border-radius: 5px;
		cursor: pointer;
		width: 160rpx;
	}

	.type-option.active {
		color: black;
	}

	.full-reduction-input {
		margin-top: 10px;
		display: flex;
		padding: 0 20rpx;
	}

	.input-unit {
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.input-unit text {
		margin-right: 5px;
	}

	.input-unit input {
		width: 40px;
		padding: 5px;
		border-radius: 5px;
	}

	/* 优惠券类型结束 */

	/* 发放开始时间 */
	.dataTime {
		display: flex;
		padding: 20rpx;
		align-items: center;
	}

	.timeFrame {
		border-radius: 60rpx;
		border: 1rpx solid #E3E3E3;
		height: 60rpx;
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 发放结束时间 */
	.numberOfPlacements {
		display: flex;
		padding: 20rpx;
		align-items: center;
	}

	.input {
		width: 190rpx;
		margin-right: 20rpx;
	}

	/* 有效期样式开始 */
	.termOfValidity {
		display: flex;
		padding: 20rpx;
	}

	/* 有效期样式结束 */

	.submit-btn {
		margin-top: 50rpx;
		width: 400rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background: #007AFF;
		color: white;
		text-align: center;
		line-height: 80rpx;
	}

	/* 公共提示语样式 */
	.placeholder-text {
		font-size: 20rpx;
		text-align: center;
		color: #999;
		/* 可以根据实际情况调整颜色 */
	}

	/* 选中日期样式 */
	.selected-date {
		color: #000;
		/* 可根据需求修改颜色 */
	}
</style>